




<template>
    <ContentWrap>
        <CardTitle title="Dialog 使用" />
        <code class="code-block mt-20px" >
            &lt;Dialog v-model="modelValue" :title="title" :width="width" :fullscreen="fullscreen" :scroll="scroll" :maxHeight="maxHeight" :loading="loading" /&gt;<br/>
            &lt;ValidErrorDialog ref="validErrorDialogRef" /&gt; <br/>
            &lt;EButton @click="openDialog"&gt;打开弹框&lt;/EButton&gt;<br/>
            &lt;EButton @click="openErrorDialog"&gt;打开验证错误弹框&lt;/EButton&gt;
        
        </code>
        <CardTitle title="Dialog 代码示例" />
        <pre class="code-block">
            <code>
&lt;script setup lang="ts"&gt;
import { ref } from 'vue'

const validErrorDialogRef=ref()
const modelValue = ref(false)
const title = ref('Dialog')
const width = ref('40%')
const fullscreen = ref(true)
const scroll = ref(false)
const maxHeight = ref('400px')
const loading = ref(false)

const openDialog = () => {
    modelValue.value = true
}
const openErrorDialog=()=>{
    validErrorDialogRef.value.openDialog(['错误提示1','错误提示2','错误提示3'])
}

&lt;/script&gt;
            </code>
        </pre>
        <CardTitle title="Dialog 属性" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>类型</th>
                    <th>默认值</th> 
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>modelValue</td> 
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否显示弹框</td>
                </tr>
                <tr>
                    <td>title</td>
                    <td>String</td>
                    <td>Dialog</td>
                    <td>弹框标题</td>
                </tr>
                <tr>
                    <td>width</td>
                    <td>String</td>
                    <td>40%</td>
                    <td>弹框宽度</td>
                </tr>
                <tr>
                    <td>fullscreen</td>
                    <td>Boolean</td>
                    <td>true</td>
                    <td>是否全屏</td>
                </tr>   
                <tr>
                    <td>scroll</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否开启滚动条</td>
                </tr>   
                <tr>
                    <td>maxHeight</td>
                    <td>String</td>
                    <td>400px</td>
                    <td>弹框最大高度</td>
                </tr>       
                <tr>
                    <td>loading</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否显示加载中</td>
                </tr>   

            </tbody>
        </table>
        <CardTitle title="Dialog 示例" />
       <div class="mt-20px">
        <Dialog v-model="modelValue" :title="title" :width="width" :fullscreen="fullscreen" :scroll="scroll" :maxHeight="maxHeight" :loading="loading" />
       <ValidErrorDialog ref="validErrorDialogRef" />
        <EButton @click="openDialog">打开弹框</EButton> <EButton @click="openErrorDialog">打开验证错误弹框</EButton>
       </div>
    </ContentWrap>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const validErrorDialogRef=ref()
const modelValue = ref(false)
const title = ref('Dialog')
const width = ref('40%')
const fullscreen = ref(true)
const scroll = ref(false)
const maxHeight = ref('400px')
const loading = ref(false)

const openDialog = () => {
    modelValue.value = true
}
const openErrorDialog=()=>{
    validErrorDialogRef.value.openDialog(['错误提示1','错误提示2','错误提示3'])
}

</script>

<style lang="scss" scoped></style>